<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
      <el-form-item label="转换器名称" prop="name">
        <el-input
          v-model="queryParams.name"
          placeholder="请输入转换器名称"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="转换器编码" prop="code">
        <el-input
          v-model="queryParams.code"
          placeholder="请输入转换器编码"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="Plus"
          @click="handleAdd"
          v-hasPermi="['web:db:transformer:dataTransformer:add']"
        >
          新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="Edit"
          :disabled="single"
          @click="handleUpdate({})"
          v-hasPermi="['web:db:transformer:dataTransformer:edit']"
        >
          修改
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="Delete"
          :disabled="multiple"
          @click="handleDelete({})"
          v-hasPermi="['web:db:transformer:dataTransformer:remove']"
        >
          删除
        </el-button>
      </el-col>
      <right-toolbar v-model:showSearch="showSearch" @query-table="getList" />
    </el-row>

    <el-table v-loading="loading" :data="list" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="转换器名称" align="center" prop="name" />
      <el-table-column label="转换器编码" align="center" prop="code" />
      <el-table-column label="脚本类型" align="center" prop="scriptType" />
      <el-table-column label="描述" align="center" prop="remark" show-overflow-tooltip />
      <el-table-column label="脚本内容" align="center" prop="script">
        <template #default="scope">
          <el-button
            v-hasPermi="['web:db:transformer:dataTransformer:info']"
            link
            type="primary"
            icon="View"
            @click="handleScriptView(scope.row)"
          >
            查看
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="220">
        <template #default="scope">
          <el-button
            link
            type="primary"
            icon="Edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['web:db:transformer:dataTransformer:edit']"
          >
            修改
          </el-button>
          <el-button
            link
            type="primary"
            icon="Position"
            style="color: orange"
            @click="handleTest(scope.row)"
            v-hasPermi="['web:db:transformer:dataTransformer:onlineTest']"
          >
            测试
          </el-button>
          <el-button
            link
            type="primary"
            icon="Delete"
            style="color: red"
            @click="handleDelete(scope.row)"
            v-hasPermi="['web:db:transformer:dataTransformer:remove']"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="pageParams.pageNum"
      v-model:limit="pageParams.pageSize"
      @pagination="getList"
    />

    <el-dialog v-model="scriptShow" title="查看脚本" width="700px" append-to-body destroy-on-close>
      <CodeEditor v-model:value="scriptContent" />
    </el-dialog>

    <detail-transformer v-model="detailShow" :current-item="detailItem" @success="getList" />

    <test-transformer v-model="testShow" :current-item="testItem" @save="handleSave" />
  </div>
</template>

<script setup name="Transformer">
  import { ref } from 'vue';
  import {
    pageDataTransformer,
    getDataTransformerInfo,
    delDataTransformer,
    updateDataTransformer,
  } from '@/api/web/db/transformer';
  import { CodeEditor } from '@/components/CodeEditor';
  import DetailTransformer from './components/detail-transformer.vue';
  import TestTransformer from './components/test-transformer.vue';
  import modal from '@/plugins/modal';

  const queryRef = ref(null);
  const pageParams = ref({
    pageNum: 1,
    pageSize: 10,
  });
  const queryParams = ref({
    name: null,
    code: null,
  });
  const loading = ref(false);
  const list = ref([]);
  const total = ref(0);
  const ids = ref([]);
  const single = ref(true);
  const multiple = ref(true);
  const showSearch = ref(true);

  const scriptShow = ref(false);
  const scriptContent = ref('');
  const detailShow = ref(false);
  const detailItem = ref(null);
  const testShow = ref(false);
  const testItem = ref(null);

  function getList() {
    loading.value = true;
    pageDataTransformer(pageParams.value, queryParams.value)
      .then((res) => {
        list.value = res?.data?.records ?? [];
        total.value = res?.data?.total ?? 0;
      })
      .finally(() => {
        loading.value = false;
      });
  }

  function handleQuery() {
    pageParams.value.pageNum = 1;
    getList();
  }

  function resetQuery() {
    queryRef.value?.resetFields();
    handleQuery();
  }

  function handleSelectionChange(selection) {
    ids.value = selection.map((item) => item.id);
    single.value = selection.length !== 1;
    multiple.value = !selection.length;
  }

  function handleAdd() {
    detailItem.value = null;
    detailShow.value = true;
  }

  function handleUpdate(row) {
    const _id = row?.id ?? ids.value?.[0];
    getDataTransformerInfo(_id).then((res) => {
      detailItem.value = res.data;
      detailShow.value = true;
    });
  }

  function handleTest(row) {
    getDataTransformerInfo(row.id).then((res) => {
      testItem.value = res.data;
      testShow.value = true;
    });
  }

  function handleDelete(row) {
    const _ids = row?.id ?? ids.value?.join(',');
    modal
      .confirm('是否确认删除编号为"' + _ids + '"的数据项？')
      .then(() => {
        return delDataTransformer(_ids);
      })
      .then(() => {
        getList();
        modal.msgSuccess('删除成功');
      })
      .catch(() => {});
  }

  function handleSave(row) {
    updateDataTransformer(row).then(() => {
      modal.msgSuccess('保存成功');
      testShow.value = false;
    });
  }

  function handleScriptView(row) {
    getDataTransformerInfo(row.id).then((res) => {
      scriptContent.value = res.data.script;
      scriptShow.value = true;
    });
  }

  getList();
</script>
